import React from 'react';
import './DetailSwiper.css'
import { Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

const Detailswiper = (props) => {
    // const imgList = [
    //     {
    //         "imgUrl": 'https://gw.alicdn.com/bao/uploaded/i3/16226043066760398/T1Qy39FiJbXXXXXXXX_!!0-item_pic.jpg_320x320q90.jpg_.webp',
    //     },
    //     {
    //         "imgUrl": 'https://gw.alicdn.com/bao/uploaded/i3/16226043066760398/T1Qy39FiJbXXXXXXXX_!!0-item_pic.jpg_320x320q90.jpg_.webp',
    //     },
    //     {
    //         "imgUrl": 'https://gw.alicdn.com/bao/uploaded/i3/16226043066760398/T1Qy39FiJbXXXXXXXX_!!0-item_pic.jpg_320x320q90.jpg_.webp',
    //     }
    // ]

    const imgList = props.commodityImgs
    return (
        <div className='detailSwiper-container'>
            <Swiper
                className='detailSwiper'
                modules={[Pagination]}
                pagination={{ clickable: true, type: "progressbar" }}
            >
               {
                   imgList.map((item,index)=>{
                       return(
                           <SwiperSlide key={index} className='detailSwiperSlide'>
                               <img src={item.imgUrl} alt="" />
                           </SwiperSlide>
                       )
                   })
               }
            </Swiper>
            
        </div>
    );
}

export default Detailswiper;
